<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>leGo-乐鲜生活</title>
    <link rel="stylesheet" type="text/css" href="css/css1.css" />
    <script src="https://cdn.bootcss.com/headroom/0.9.4/angular.headroom.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.js"></script>
    <script src="resource/ply/Ply.min.js"></script>
    <link rel="stylesheet" href="resource/ply/ply.css">
</head>

<body>
    <div id="app-index">
        <!--顶上-->
        <div class="top">
            <div class="top-list">
                <div class="top-left" v-show="!isLogin">
                    <a href="#"><span>雷猴~</span></a>
                    <a href="login.html"><span>[请登录]</span></a>
                    <a href="register.html"><span>[注册]</span></a>
                </div>
                <div class="top-right">
                    <a href="user-center.html" v-show="isLogin"><span>{{ nickname }}</span></a>
                    <a href="javascript:void(0)"><span style="cursor: pointer" @click="quitLogin"
                                                       v-show="isLogin">[退出]</span></a>
                    <a href="user-order.html"><span>我的订单</span></a>
                    <a href="user-collect.html"><span>我的收藏</span></a>
                </div>
            </div>
        </div>
        <!--首页-->
        <div class="head-logo">
            <div class="head-inner">
                <!--logo-->
                <div class="header-logo">
                    <a href="index.html">
                        <img src="images/logo.png" alt="乐鲜生活" height="80" />
                    </a>
                </div>
                <!--购物车-->
                <div class="buyCar">
                    <a href="buy-cart.html">
                        <span class="shopping-bag-icon"></span>
                    </a>
                </div>
                <div class="header-search">
                    <!--搜索框-->
                    <div class="search-form">
                        <input type="text" name="search-content" class="header-search-input" maxlength="100" placeholder="搜一哈你想搜的内容" v-model="searchContent" />
                        <a @click="search" class="header-search-button">
                            <span class="header-search-icon"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-nav">
            <div class="first-category">
                <ul class="first-category-ul">
                    <li v-for="(item,index) in categoryTree" class="first-category-item">
                        <a href="#Anchor"><span @click="onPrimCateClick(index)">{{item.primaryCategory.name}}</span></a>
                    </li>

                </ul>

            </div>
        </div>
        <div class="home-page">

            <!--轮播图-->
            <div id="banner">
                <div class="img-list">
                    <ul class="img-ul">
                        <li v-for="image_B in image_post"class="img-item" style="display: block">
                            <img :src="image_B" alt="" width="1150" height="450" />
                        </li>
                       
                    </ul>
                </div>
                <div class="btn-list">
                    <ul class="btn-ul">
                        <li v-for="image in imgMini_post" class="btn-item btn-item-1 active" @click="onPostItemClick">
                            <img :src="image" alt="" width="138" height="54" />
                        </li>
                    </ul>
                </div>
                <div class="tab-btn btn-left"></div>
                <div class="tab-btn btn-right"></div>
            </div>

            <!--人气单品-->
            <div class="content-module">
                <div class="floor-title">
                    <h2 class="floor-title-content">人气单品</h2>
                </div>
                <ul class="module-ul">
                    <li class="hot-single-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/hotsingle/hotsingle1.jpg" alt="">
                        </a>
                    </li>
                    <li class="hot-single-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/hotsingle/hotsingle2.jpg" alt="">
                        </a>
                    </li>
                    <li class="hot-single-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/hotsingle/hotsingle3.jpg" alt="">
                        </a>
                    </li>
                    <li class="hot-single-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/hotsingle/hotsingle4.jpg" alt="">
                        </a>
                    </li>
                    <li class="hot-single-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/hotsingle/hotsingle5.jpg" alt="">
                        </a>
                    </li>
                    <li class="hot-single-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/hotsingle/hotsingle6.jpg" alt="">
                        </a>
                    </li>
                    <li class="hot-single-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/hotsingle/hotsingle7.jpg" alt="">
                        </a>
                    </li>
                    <li class="hot-single-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/hotsingle/hotsingle8.jpg" alt="">
                        </a>
                    </li>
                    <li class="hot-single-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/hotsingle/hotsingle9.jpg" alt="">
                        </a>
                    </li>
                    <li class="hot-single-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/hotsingle/hotsingle10.jpg" alt="">
                        </a>
                    </li>
                    <li class="hot-single-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/hotsingle/hotsingle11.jpg" alt="" width="378" />
                        </a>
                    </li>
                    <li class="hot-single-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/hotsingle/hotsingle12.jpg" alt="" width="378" />
                        </a>
                    </li>
                    <li class="hot-single-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/hotsingle/hotsingle12.jpg" alt="" width="378" />
                        </a>
                    </li>
                </ul>
            </div>

            <!--优选品牌-->
            <div class="content-module">
                <div class="floor-title">
                    <h2 class="floor-title-content">优选品牌</h2>
                </div>
                <ul class="module-ul">
                    <li class="brand-icon-item home-page-img-item">
                        <a href="store.html" target="_blank" alt="">
                            <img src="images/brandicon/brandicon1.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/brandicon/brandicon2.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/brandicon/brandicon3.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/brandicon/brandicon4.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/brandicon/brandicon5.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/brandicon/brandicon6.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/brandicon/brandicon7.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/brandicon/brandicon8.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/brandicon/brandicon9.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/brandicon/brandicon10.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/brandicon/brandicon11.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/brandicon/brandicon12.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/brandicon/brandicon13.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/brandicon/brandicon14.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/brandicon/brandicon15.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/brandicon/brandicon16.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <img src="images/brandicon/brandicon17.jpg" alt="">
                        </a>
                    </li>
                    <li class="brand-icon-item home-page-img-item">
                        <a href="#" target="_blank" alt="">
                            <span>Learn more >></span>
                        </a>
                    </li>
                </ul>
            </div>
            <a name="Anchor"></a>

            <!---潮流上装(带侧边栏的模版)-->
            <!--整体-->
            <div class="tpl-recommend">
                <!--标题-->
                <div class="floor-title">
                    <h2 class="floor-title-content">{{currentPrimCategory.name}}</h2>
                </div>
                <!--内容-->
                <div class="tpl-body" >
                    <!--第一列导航-->
                    <div class="tpl-nav">
                        <!--促销图片-->
                        <div class="tpl-nav-clo">
                            <a href="#" class="keywords0">
                                <img src="images/f-cloths/1.jpg" class="home-page-img-item" alt="" />
                            </a>
                            <a href="#" class="keywords1">
                                <img src="images/f-cloths/2.jpg" class="home-page-img-item" alt="" />
                            </a>
                        </div>
                        <!--二级目录-->
                        <div class="sec-category-clo">
                            <a v-for="(item, index) in currentSubCategory" @click="onSubCateClick(index)" class="sec-category-clo-item"
                            style="cursor: pointer;">{{item.name}}</a>
                        </div>
                    </div>
                    <!--商品品牌-->
                    <div class="tpl-brand">
                        <ul class="tpl-brand-ul">
                            <li class="tpl-brand-item">
                                <a href="#">
                                    <img src="images/f-cloths/3.jpg" alt="" />
                                </a>
                            </li>
                            <li class="tpl-brand-item">
                                <a href="#">
                                    <img src="images/f-cloths/4.jpg" alt="" />
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!--商品品类型-->
                    <div class="tpl-types">
                        <ul class="tpl-types-ul">
                            <li class="tpl-types-item" v-for="(item,index) in currentGoodsInPrimToDisplay.allGoods" @click="onGoodItemClick(index)" v-if="index<6" style="width: 185px;height:248px">
                                <img :src="item.image_main" style="width: 150px;height:150px; cursor: pointer;" alt="">
                            </li>
                            
                        </ul>
                    </div>
                </div>
                <!--商品样例-->
                <div class="tpl-product">
                    <ul class="tpl-product-ul">
                        <li class="tpl-product-item" v-for="(item,index) in currentGoodsInPrimToDisplay.allGoods" @click="onGoodItemClick(index)" v-if="index>=6&&index<12">
                            <a href="#">
                                <img :src="item.image_main" alt="" width="222">
                            </a>
                        </li>
                        

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--轮播图-->
    <!-- <script type="text/javascript">
        var index = 0;
        var timer;
        var container = document.getElementById("banner");

        function play() {
            timer = setInterval(function () {
                $(".btn-right").click();
            }, 1500);
        }

        function stop() {
            clearInterval(timer);
        }

        $(".btn-item").click(function () {
            index = $(this).index();//获取点击li的下标
            $(this).addClass("active").siblings().removeClass("active");
            $(".img-item").eq(index).fadeIn().siblings().fadeOut();
        });

        $(".btn-right").click(function () {
            index++;
            if (index > 7) index = 0;

            $(".img-item").eq(index).fadeIn().siblings().fadeOut();
            $(".btn-item").eq(index).addClass("active").siblings().removeClass("active");
        });

        $(".btn-left").click(function () {
            index--;
            if (index < 0) {
                index = 8;
            }
            $(".img-item").eq(index).fadeIn().siblings().fadeOut();
            $(".btn-item").eq(index).addClass("active").siblings().removeClass("active");
        });

        container.onmouseover = stop;
        container.onmouseout = play;
    </script> -->

    <!--导航固定在顶部-->
    <script type="text/javascript">
        $(window).scroll(function () {
            var hei = $(window).scrollTop();
            if (hei > 183) {
                $(".header-nav").addClass("header-nav-top");
            }
            else {
                $(".header-nav-top").removeClass("header-nav-top");

            }
        });
    </script>
    <!--搜索-->
    <!-- <script type="text/javascript">
        $(".header-search-button").click(function () {

        })
    </script> -->
</body>
<script src="js/index.js"></script>

</html>